<template>
  <el-collapse v-model="activeNames" class="side-pane" @change="handleChange">
    <el-collapse-item title="版本" name="1">
      <div v-for="i in versions" :key="i" class="list-item">
        <el-icon><Document /></el-icon>
        <a href="#" class="title">{{ i.title }}</a>
        <span class="count">{{ i.count }}</span>
      </div>
    </el-collapse-item>
    <el-collapse-item title="UI组件" name="2">
      <div v-for="i in state.tagList" :key="i" class="list-item">
        <el-icon><Document /></el-icon>
        <a href="#" class="title">{{ i.tagName }}</a>
        <span class="count">10</span>
      </div>
    </el-collapse-item>
    <el-collapse-item title="后端" name="3">
      <div v-for="i in state.backendList" :key="i" class="list-item">
        <el-icon><Document /></el-icon>
        <a href="#" class="title">{{ i.backendName }}</a>
        <span class="count">10</span>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup>
import { Document } from '@element-plus/icons-vue'

const activeNames = ref(['1', '2'])
const state = reactive({
  tagList: [],
  backendList: [],
})
const versions = [
  {
    id: 1,
    title: 'Vue3',
    count: 10,
  },
  {
    id: 1,
    title: 'Vue2',
    count: 10,
  },
]

// 后台语言列表
const getBackend = async () => {
  const { data } = await useAsyncData('use_BackendData', () => useBackendData({ type: 1 }))
  state.backendList = data.value.rows
}

getBackend()

// 获取列表
const getTags = async () => {
  const { data } = await useAsyncData('use_TagsData', () => useTagsData({ type: 1 }))
  state.tagList = data.value?.rows || []
}

getTags()
</script>

<style lang="scss" scoped>
.side-pane {
  border-top: none;
  :deep(.el-collapse-item__header) {
    padding-left: 20px;
    &.is-active {
      border-bottom: 1px solid var(--el-collapse-border-color);
    }
  }
  :deep(.el-collapse-item__content) {
    padding-bottom: 0;
  }
}
.list-item {
  display: flex;
  align-items: center;
  padding: 12px;

  .el-icon {
    margin-right: 8px;
    font-size: 16px;
  }

  .title {
    flex: 1;
    color: #333;
    text-decoration: none;

    &:hover {
      color: #409eff; // Element Plus 主题色
    }
  }

  .count {
    color: #909399;
  }
}
</style>
